<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @charset "UTF-8";

        body {
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-direction: column;
            flex-wrap: wrap;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .scene {
            display: -webkit-box;
            display: flex;
        }

        /** Wizard CSS & Animations */
        .wizard {
            position: relative;
            width: 190px;
            height: 240px;
        }

        .body {
            position: absolute;
            bottom: 0;
            left: 68px;
            height: 100px;
            width: 60px;
            background: #3f64ce;
        }

        .body::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 20px;
            height: 100px;
            width: 60px;
            background: #3f64ce;
            -webkit-transform: skewX(14deg);
            transform: skewX(14deg);
        }

        .right-arm {
            position: absolute;
            bottom: 74px;
            left: 110px;
            height: 44px;
            width: 90px;
            background: #3f64ce;
            border-radius: 22px;
            /** animation */
            -webkit-transform-origin: 16px 22px;
            transform-origin: 16px 22px;
            -webkit-transform: rotate(70deg);
            transform: rotate(70deg);
            -webkit-animation: right_arm 10s ease-in-out infinite;
            animation: right_arm 10s ease-in-out infinite;
        }

        .right-arm .right-hand {
            position: absolute;
            right: 8px;
            bottom: 8px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #f1c5b4;
            /** animation */
            -webkit-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
            -webkit-animation: right_hand 10s ease-in-out infinite;
            animation: right_hand 10s ease-in-out infinite;
        }

        .right-arm .right-hand::after {
            content: "";
            position: absolute;
            right: 0px;
            top: -8px;
            width: 15px;
            height: 30px;
            border-radius: 10px;
            background: #f1c5b4;
            /** Animation */
            -webkit-transform: translateY(16px);
            transform: translateY(16px);
            -webkit-animation: right_finger 10s ease-in-out infinite;
            animation: right_finger 10s ease-in-out infinite;
        }

        .left-arm {
            position: absolute;
            bottom: 74px;
            left: 26px;
            height: 44px;
            width: 70px;
            background: #3f64ce;
            border-bottom-left-radius: 8px;
            /** animation */
            -webkit-transform-origin: 60px 26px;
            transform-origin: 60px 26px;
            -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
            -webkit-animation: left_arm 10s ease-in-out infinite;
            animation: left_arm 10s ease-in-out infinite;
        }

        .left-arm .left-hand {
            position: absolute;
            left: -18px;
            top: 0;
            width: 18px;
            height: 30px;
            border-top-left-radius: 35px;
            border-bottom-left-radius: 35px;
            background: #f1c5b4;
        }

        .left-arm .left-hand::after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            height: 15px;
            border-radius: 20px;
            background: #f1c5b4;
            /** Animation */
            -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-animation: left_finger 10s ease-in-out infinite;
            animation: left_finger 10s ease-in-out infinite;
        }

        .head {
            position: absolute;
            top: 0;
            left: 14px;
            width: 160px;
            height: 210px;
            /** Animation */
            -webkit-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
            -webkit-animation: head 10s ease-in-out infinite;
            animation: head 10s ease-in-out infinite;
        }

        .head .beard {
            position: absolute;
            bottom: 0;
            left: 38px;
            height: 106px;
            width: 80px;
            border-bottom-right-radius: 55%;
            background: #ffffff;
        }

        .head .beard::after {
            content: "";
            position: absolute;
            top: 16px;
            left: -10px;
            width: 40px;
            height: 20px;
            border-radius: 20px;
            background: #ffffff;
        }

        .head .face {
            position: absolute;
            bottom: 76px;
            left: 38px;
            height: 30px;
            width: 60px;
            background: #f1c5b4;
        }

        .head .face::before {
            content: "";
            position: absolute;
            top: 0px;
            left: 40px;
            width: 20px;
            height: 40px;
            border-bottom-right-radius: 20px;
            border-bottom-left-radius: 20px;
            background: #f1c5b4;
        }

        .head .face::after {
            content: "";
            position: absolute;
            top: 16px;
            left: -10px;
            width: 50px;
            height: 20px;
            border-radius: 20px;
            border-bottom-right-radius: 0px;
            background: #ffffff;
        }

        .head .face .adds {
            /** Nose */
            position: absolute;
            top: 0px;
            left: -10px;
            width: 40px;
            height: 20px;
            border-radius: 20px;
            background: #f1c5b4;
        }

        .head .face .adds::after {
            /** Ear */
            content: "";
            position: absolute;
            top: 5px;
            left: 80px;
            width: 15px;
            height: 20px;
            border-bottom-right-radius: 20px;
            border-top-right-radius: 20px;
            background: #f1c5b4;
        }

        .head .hat {
            position: absolute;
            bottom: 106px;
            left: 0;
            width: 160px;
            height: 20px;
            border-radius: 20px;
            background: #3f64ce;
        }

        .head .hat::before {
            content: "";
            position: absolute;
            top: -70px;
            left: 50%;
            -webkit-transform: translatex(-50%);
            transform: translatex(-50%);
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 34px 70px 50px;
            border-color: transparent transparent #3f64ce transparent;
        }

        .head .hat::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 160px;
            height: 20px;
            background: #3f64ce;
            border-radius: 20px;
        }

        .head .hat .hat-of-the-hat {
            position: absolute;
            bottom: 78px;
            left: 79px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 25px 25px 19px;
            border-color: transparent transparent #3f64ce transparent;
        }

        .head .hat .hat-of-the-hat::after {
            content: "";
            position: absolute;
            top: 6px;
            left: -4px;
            width: 35px;
            height: 10px;
            border-radius: 10px;
            border-bottom-left-radius: 0px;
            background: #3f64ce;
            -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
        }

        .head .hat .four-point-star {
            position: absolute;
            width: 12px;
            height: 12px;
        }

        .head .hat .four-point-star::after,
        .head .hat .four-point-star::before {
            content: "";
            position: absolute;
            background: #ffffff;
            display: block;
            left: 0;
            width: 141.4213%;
            /* 100% * √2 */
            top: 0;
            bottom: 0;
            border-radius: 10%;
            -webkit-transform: rotate(66.66deg) skewX(45deg);
            transform: rotate(66.66deg) skewX(45deg);
        }

        .head .hat .four-point-star::after {
            -webkit-transform: rotate(156.66deg) skew(45deg);
            transform: rotate(156.66deg) skew(45deg);
        }

        .head .hat .four-point-star.--first {
            bottom: 28px;
            left: 46px;
        }

        .head .hat .four-point-star.--second {
            bottom: 40px;
            left: 80px;
        }

        .head .hat .four-point-star.--third {
            bottom: 15px;
            left: 108px;
        }

        /** 10s animation - 10% = 1s */
        @-webkit-keyframes right_arm {
            0% {
                -webkit-transform: rotate(70deg);
                transform: rotate(70deg);
            }

            10% {
                -webkit-transform: rotate(8deg);
                transform: rotate(8deg);
            }

            15% {
                -webkit-transform: rotate(20deg);
                transform: rotate(20deg);
            }

            20% {
                -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
            }

            25% {
                -webkit-transform: rotate(26deg);
                transform: rotate(26deg);
            }

            30% {
                -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
            }

            35% {
                -webkit-transform: rotate(28deg);
                transform: rotate(28deg);
            }

            40% {
                -webkit-transform: rotate(9deg);
                transform: rotate(9deg);
            }

            45% {
                -webkit-transform: rotate(28deg);
                transform: rotate(28deg);
            }

            50% {
                -webkit-transform: rotate(8deg);
                transform: rotate(8deg);
            }

            58% {
                -webkit-transform: rotate(74deg);
                transform: rotate(74deg);
            }

            62% {
                -webkit-transform: rotate(70deg);
                transform: rotate(70deg);
            }
        }

        @keyframes right_arm {
            0% {
                -webkit-transform: rotate(70deg);
                transform: rotate(70deg);
            }

            10% {
                -webkit-transform: rotate(8deg);
                transform: rotate(8deg);
            }

            15% {
                -webkit-transform: rotate(20deg);
                transform: rotate(20deg);
            }

            20% {
                -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
            }

            25% {
                -webkit-transform: rotate(26deg);
                transform: rotate(26deg);
            }

            30% {
                -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
            }

            35% {
                -webkit-transform: rotate(28deg);
                transform: rotate(28deg);
            }

            40% {
                -webkit-transform: rotate(9deg);
                transform: rotate(9deg);
            }

            45% {
                -webkit-transform: rotate(28deg);
                transform: rotate(28deg);
            }

            50% {
                -webkit-transform: rotate(8deg);
                transform: rotate(8deg);
            }

            58% {
                -webkit-transform: rotate(74deg);
                transform: rotate(74deg);
            }

            62% {
                -webkit-transform: rotate(70deg);
                transform: rotate(70deg);
            }
        }

        @-webkit-keyframes left_arm {
            0% {
                -webkit-transform: rotate(-70deg);
                transform: rotate(-70deg);
            }

            10% {
                -webkit-transform: rotate(6deg);
                transform: rotate(6deg);
            }

            15% {
                -webkit-transform: rotate(-18deg);
                transform: rotate(-18deg);
            }

            20% {
                -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
            }

            25% {
                -webkit-transform: rotate(-18deg);
                transform: rotate(-18deg);
            }

            30% {
                -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
            }

            35% {
                -webkit-transform: rotate(-17deg);
                transform: rotate(-17deg);
            }

            40% {
                -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
            }

            45% {
                -webkit-transform: rotate(-18deg);
                transform: rotate(-18deg);
            }

            50% {
                -webkit-transform: rotate(6deg);
                transform: rotate(6deg);
            }

            58% {
                -webkit-transform: rotate(-74deg);
                transform: rotate(-74deg);
            }

            62% {
                -webkit-transform: rotate(-70deg);
                transform: rotate(-70deg);
            }
        }

        @keyframes left_arm {
            0% {
                -webkit-transform: rotate(-70deg);
                transform: rotate(-70deg);
            }

            10% {
                -webkit-transform: rotate(6deg);
                transform: rotate(6deg);
            }

            15% {
                -webkit-transform: rotate(-18deg);
                transform: rotate(-18deg);
            }

            20% {
                -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
            }

            25% {
                -webkit-transform: rotate(-18deg);
                transform: rotate(-18deg);
            }

            30% {
                -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
            }

            35% {
                -webkit-transform: rotate(-17deg);
                transform: rotate(-17deg);
            }

            40% {
                -webkit-transform: rotate(5deg);
                transform: rotate(5deg);
            }

            45% {
                -webkit-transform: rotate(-18deg);
                transform: rotate(-18deg);
            }

            50% {
                -webkit-transform: rotate(6deg);
                transform: rotate(6deg);
            }

            58% {
                -webkit-transform: rotate(-74deg);
                transform: rotate(-74deg);
            }

            62% {
                -webkit-transform: rotate(-70deg);
                transform: rotate(-70deg);
            }
        }

        @-webkit-keyframes right_hand {
            0% {
                -webkit-transform: rotate(-40deg);
                transform: rotate(-40deg);
            }

            10% {
                -webkit-transform: rotate(-20deg);
                transform: rotate(-20deg);
            }

            15% {
                -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg);
            }

            20% {
                -webkit-transform: rotate(-60deg);
                transform: rotate(-60deg);
            }

            25% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            30% {
                -webkit-transform: rotate(-60deg);
                transform: rotate(-60deg);
            }

            35% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            40% {
                -webkit-transform: rotate(-40deg);
                transform: rotate(-40deg);
            }

            45% {
                -webkit-transform: rotate(-60deg);
                transform: rotate(-60deg);
            }

            50% {
                -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
            }

            60% {
                -webkit-transform: rotate(-40deg);
                transform: rotate(-40deg);
            }
        }

        @keyframes right_hand {
            0% {
                -webkit-transform: rotate(-40deg);
                transform: rotate(-40deg);
            }

            10% {
                -webkit-transform: rotate(-20deg);
                transform: rotate(-20deg);
            }

            15% {
                -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg);
            }

            20% {
                -webkit-transform: rotate(-60deg);
                transform: rotate(-60deg);
            }

            25% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            30% {
                -webkit-transform: rotate(-60deg);
                transform: rotate(-60deg);
            }

            35% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            40% {
                -webkit-transform: rotate(-40deg);
                transform: rotate(-40deg);
            }

            45% {
                -webkit-transform: rotate(-60deg);
                transform: rotate(-60deg);
            }

            50% {
                -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
            }

            60% {
                -webkit-transform: rotate(-40deg);
                transform: rotate(-40deg);
            }
        }

        @-webkit-keyframes right_finger {
            0% {
                -webkit-transform: translateY(16px);
                transform: translateY(16px);
            }

            10% {
                -webkit-transform: none;
                transform: none;
            }

            50% {
                -webkit-transform: none;
                transform: none;
            }

            60% {
                -webkit-transform: translateY(16px);
                transform: translateY(16px);
            }
        }

        @keyframes right_finger {
            0% {
                -webkit-transform: translateY(16px);
                transform: translateY(16px);
            }

            10% {
                -webkit-transform: none;
                transform: none;
            }

            50% {
                -webkit-transform: none;
                transform: none;
            }

            60% {
                -webkit-transform: translateY(16px);
                transform: translateY(16px);
            }
        }

        @-webkit-keyframes left_finger {
            0% {
                -webkit-transform: scaleX(0);
                transform: scaleX(0);
            }

            10% {
                -webkit-transform: scaleX(1) rotate(6deg);
                transform: scaleX(1) rotate(6deg);
            }

            15% {
                -webkit-transform: scaleX(1) rotate(0deg);
                transform: scaleX(1) rotate(0deg);
            }

            20% {
                -webkit-transform: scaleX(1) rotate(8deg);
                transform: scaleX(1) rotate(8deg);
            }

            25% {
                -webkit-transform: scaleX(1) rotate(0deg);
                transform: scaleX(1) rotate(0deg);
            }

            30% {
                -webkit-transform: scaleX(1) rotate(7deg);
                transform: scaleX(1) rotate(7deg);
            }

            35% {
                -webkit-transform: scaleX(1) rotate(0deg);
                transform: scaleX(1) rotate(0deg);
            }

            40% {
                -webkit-transform: scaleX(1) rotate(5deg);
                transform: scaleX(1) rotate(5deg);
            }

            45% {
                -webkit-transform: scaleX(1) rotate(0deg);
                transform: scaleX(1) rotate(0deg);
            }

            50% {
                -webkit-transform: scaleX(1) rotate(6deg);
                transform: scaleX(1) rotate(6deg);
            }

            58% {
                -webkit-transform: scaleX(0);
                transform: scaleX(0);
            }
        }

        @keyframes left_finger {
            0% {
                -webkit-transform: scaleX(0);
                transform: scaleX(0);
            }

            10% {
                -webkit-transform: scaleX(1) rotate(6deg);
                transform: scaleX(1) rotate(6deg);
            }

            15% {
                -webkit-transform: scaleX(1) rotate(0deg);
                transform: scaleX(1) rotate(0deg);
            }

            20% {
                -webkit-transform: scaleX(1) rotate(8deg);
                transform: scaleX(1) rotate(8deg);
            }

            25% {
                -webkit-transform: scaleX(1) rotate(0deg);
                transform: scaleX(1) rotate(0deg);
            }

            30% {
                -webkit-transform: scaleX(1) rotate(7deg);
                transform: scaleX(1) rotate(7deg);
            }

            35% {
                -webkit-transform: scaleX(1) rotate(0deg);
                transform: scaleX(1) rotate(0deg);
            }

            40% {
                -webkit-transform: scaleX(1) rotate(5deg);
                transform: scaleX(1) rotate(5deg);
            }

            45% {
                -webkit-transform: scaleX(1) rotate(0deg);
                transform: scaleX(1) rotate(0deg);
            }

            50% {
                -webkit-transform: scaleX(1) rotate(6deg);
                transform: scaleX(1) rotate(6deg);
            }

            58% {
                -webkit-transform: scaleX(0);
                transform: scaleX(0);
            }
        }

        @-webkit-keyframes head {
            0% {
                -webkit-transform: rotate(-3deg);
                transform: rotate(-3deg);
            }

            10% {
                -webkit-transform: translatex(10px) rotate(7deg);
                transform: translatex(10px) rotate(7deg);
            }

            50% {
                -webkit-transform: translatex(0px) rotate(0deg);
                transform: translatex(0px) rotate(0deg);
            }

            56% {
                -webkit-transform: rotate(-3deg);
                transform: rotate(-3deg);
            }
        }

        @keyframes head {
            0% {
                -webkit-transform: rotate(-3deg);
                transform: rotate(-3deg);
            }

            10% {
                -webkit-transform: translatex(10px) rotate(7deg);
                transform: translatex(10px) rotate(7deg);
            }

            50% {
                -webkit-transform: translatex(0px) rotate(0deg);
                transform: translatex(0px) rotate(0deg);
            }

            56% {
                -webkit-transform: rotate(-3deg);
                transform: rotate(-3deg);
            }
        }

        /** Objects CSS & Animations */
        .objects {
            position: relative;
            width: 200px;
            height: 240px;
        }

        .square {
            position: absolute;
            bottom: -60px;
            left: -5px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            /** Animation */
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
            -webkit-animation: path_square 10s ease-in-out infinite;
            animation: path_square 10s ease-in-out infinite;
        }

        .square::after {
            content: "";
            position: absolute;
            top: 10px;
            left: 0;
            width: 50px;
            height: 50px;
            background: #9ab3f5;
        }

        .circle {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            /** Animation */
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
            -webkit-animation: path_circle 10s ease-in-out infinite;
            animation: path_circle 10s ease-in-out infinite;
        }

        .circle::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 25px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #c56183;
        }

        .triangle {
            position: absolute;
            bottom: -62px;
            left: -10px;
            width: 110px;
            height: 110px;
            border-radius: 50%;
            /** Animation */
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
            -webkit-animation: path_triangle 10s ease-in-out infinite;
            animation: path_triangle 10s ease-in-out infinite;
        }

        .triangle::after {
            content: "";
            position: absolute;
            top: 0;
            right: -10px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 28px 48px 28px;
            border-color: transparent transparent #89beb3 transparent;
        }

        /** 10s animation - 10% = 1s */
        @-webkit-keyframes path_circle {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            10% {
                -webkit-transform: translateY(-100px) rotate(-5deg);
                transform: translateY(-100px) rotate(-5deg);
            }

            55% {
                -webkit-transform: translateY(-100px) rotate(-360deg);
                transform: translateY(-100px) rotate(-360deg);
            }

            58% {
                -webkit-transform: translateY(-100px) rotate(-360deg);
                transform: translateY(-100px) rotate(-360deg);
            }

            63% {
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
            }
        }

        @keyframes path_circle {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            10% {
                -webkit-transform: translateY(-100px) rotate(-5deg);
                transform: translateY(-100px) rotate(-5deg);
            }

            55% {
                -webkit-transform: translateY(-100px) rotate(-360deg);
                transform: translateY(-100px) rotate(-360deg);
            }

            58% {
                -webkit-transform: translateY(-100px) rotate(-360deg);
                transform: translateY(-100px) rotate(-360deg);
            }

            63% {
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
            }
        }

        @-webkit-keyframes path_square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            10% {
                -webkit-transform: translateY(-155px) translatex(-15px) rotate(10deg);
                transform: translateY(-155px) translatex(-15px) rotate(10deg);
            }

            55% {
                -webkit-transform: translateY(-155px) translatex(-15px) rotate(-350deg);
                transform: translateY(-155px) translatex(-15px) rotate(-350deg);
            }

            57% {
                -webkit-transform: translateY(-155px) translatex(-15px) rotate(-350deg);
                transform: translateY(-155px) translatex(-15px) rotate(-350deg);
            }

            63% {
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
            }
        }

        @keyframes path_square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            10% {
                -webkit-transform: translateY(-155px) translatex(-15px) rotate(10deg);
                transform: translateY(-155px) translatex(-15px) rotate(10deg);
            }

            55% {
                -webkit-transform: translateY(-155px) translatex(-15px) rotate(-350deg);
                transform: translateY(-155px) translatex(-15px) rotate(-350deg);
            }

            57% {
                -webkit-transform: translateY(-155px) translatex(-15px) rotate(-350deg);
                transform: translateY(-155px) translatex(-15px) rotate(-350deg);
            }

            63% {
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
            }
        }

        @-webkit-keyframes path_triangle {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            10% {
                -webkit-transform: translateY(-172px) translatex(10px) rotate(-10deg);
                transform: translateY(-172px) translatex(10px) rotate(-10deg);
            }

            55% {
                -webkit-transform: translateY(-172px) translatex(10px) rotate(-365deg);
                transform: translateY(-172px) translatex(10px) rotate(-365deg);
            }

            58% {
                -webkit-transform: translateY(-172px) translatex(10px) rotate(-365deg);
                transform: translateY(-172px) translatex(10px) rotate(-365deg);
            }

            63% {
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
            }
        }

        @keyframes path_triangle {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            10% {
                -webkit-transform: translateY(-172px) translatex(10px) rotate(-10deg);
                transform: translateY(-172px) translatex(10px) rotate(-10deg);
            }

            55% {
                -webkit-transform: translateY(-172px) translatex(10px) rotate(-365deg);
                transform: translateY(-172px) translatex(10px) rotate(-365deg);
            }

            58% {
                -webkit-transform: translateY(-172px) translatex(10px) rotate(-365deg);
                transform: translateY(-172px) translatex(10px) rotate(-365deg);
            }

            63% {
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
            }
        }

        .progress {
            position: relative;
            margin-top: 60px;
            width: 400px;
            height: 20px;
            background: #eee;
        }

        .progress::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: #637373;
            -webkit-animation: progress 20s linear infinite;
            animation: progress 20s linear infinite;
        }

        @-webkit-keyframes progress {
            from {
                width: 0;
            }

            to {
                width: 100%;
            }
        }

        @keyframes progress {
            from {
                width: 0;
            }

            to {
                width: 100%;
            }
        }

        .noise {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            z-index: 1000;
            background-image: url();
        }
    </style>
</head>

<body>
    <div class="scene">
        <div class="objects">
            <div class="square"></div>
            <div class="circle"></div>
            <div class="triangle"></div>
        </div>
        <div class="wizard">
            <div class="body"></div>
            <div class="right-arm">
                <div class="right-hand"></div>
            </div>
            <div class="left-arm">
                <div class="left-hand"></div>
            </div>
            <div class="head">
                <div class="beard"></div>
                <div class="face">
                    <div class="adds"></div>
                </div>
                <div class="hat">
                    <div class="hat-of-the-hat"></div>
                    <div class="four-point-star --first"></div>
                    <div class="four-point-star --second"></div>
                    <div class="four-point-star --third"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="progress"></div>
    <div class="noise"></div>
</body>

</html>